<!--  -->
<template>
  <div class="main">
    <el-card class="ik-chart-card">
      <div slot="header" class="clearfix">
        <span class="ik-chart-card-title">{{ title }}</span>
        <p class="table_title_img" />
        <span class="logo" />
      </div>

      <div v-if="type === 'circle'" class="board">
        <div v-for="item in data" :key="item.keyfield" class="circle_board">
          <el-progress
            v-if="type == 'circle'"
            type="circle"
            :percentage="item.num ? item.num : 100"
            :show-text="false"
          />
          <div class="circle_board_content">
            <p>{{ item.valuefield }}</p>
            <p>{{ item.keyfield }}</p>
          </div>
        </div>
      </div>
      <div v-else class="board">
        <div v-for="item in data" :key="item.keyfield" class="square_board">
          <div class="square_board_content">
            <p>{{ item.valuefield }}</p>
            <p>{{ item.keyfield }}</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Circle",
  components: {},
  props: {
    type: {
      type: String,
      default: "circle"
    },
    title: {
      type: String,
      default: "方形圆形卡片"
    },
    val: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // title: '方形圆形卡片',
      data: [{ keyfield: "抢救进度", valuefield: "85%", num: 85 }]
    }
  },
  computed: {},
  watch: {},
  created() {
    if (this.val.length > 0) {
      this.data = this.val
    }
  },
  mounted() {},

  methods: {}
}
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  .ik-chart-card{
    height: 100%;
  }
  .board {
    width: auto;
    display: flex;
    flex-flow: row wrap; // 以行排列 并且允许换行
    align-content: space-around;
    height: 100%;
    width: 100%;
    justify-content: space-around;
    // position: absolute;
    // top: 200px;
    // background-image: url('../assets/robot/bg.png');
    // image-rendering: auto;
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    // border-radius: 0px;
    // background-color:transparent ;
    ::v-deep.circle_board {
      // width: 110px;
      // height: 110px;
      width: auto;
      height: auto;
      position: relative;
      margin: 10px 10px;
      .el-progress {
        width: 110px;
        height: 110px;
        .el-progress-circle {
          width: 110px !important;
          height: 110px !important;
        }
      }

      .circle_board_content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 60px;
        color: white;
        p {
          width: 100%;
          text-align: center;
          height: 30px;
          // color: #606266;
          // color: white;
          font-size: 16px;
          margin: 0;
        }
      }
    }
    .square_board {
      width: 40%;
      height: 40%;
      position: relative;
      margin: 4% 5%;
      background-color: #409eff;
      // background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
      .square_board_content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 60px;
        p {
          width: 100%;
          text-align: center;
          height: 30px;
          // color: #606266;
          color: white;
          font-size: 16px;
          margin: 0;
        }
      }
    }
  }
}
</style>
